<template>
  <div class="auth-container">
    <el-card class="auth-card badges-card">
      <template #header>
        <div class="card-header">
          <h2>徽章中心</h2>
          <p class="subtitle">达成目标，收集你的成长徽章</p>
        </div>
      </template>

      <el-row :gutter="16">
        <el-col v-for="b in badges" :key="b.code" :xs="12" :sm="8" :md="6">
          <el-card class="badge" shadow="hover">
            <div class="icon">🏅</div>
            <div class="title">{{ b.title }}</div>
            <div class="desc">{{ b.description }}</div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
type Badge = { code: string; title: string; description?: string }
const badges = ref<Badge[]>([
  { code: 'DAY_1', title: '第一天', description: '完成第一条成长记录' },
  { code: 'WEEK_1', title: '第一周', description: '坚持一周记录' },
  { code: 'MONTH_1', title: '第一月', description: '坚持一月记录' },
])
</script>

<style scoped>
.badges-card { max-width: 1000px; margin: 40px auto; }
.subtitle { margin: 6px 0 0; font-size: 14px; color: #8a6f5b; }
.badge { text-align: center; background: #fffaf6; }
.badge .icon { font-size: 40px; }
.badge .title { margin-top: 8px; font-weight: 600; color: #3d2b20; }
.badge .desc { color: #8a6f5b; font-size: 13px; }
</style>